<template>
    <div class="flyDuck-app-home-main-page">
        <!--搜索区域-->
        <div class="flyDuck-app-home-main-page-query">
            <el-form ref="queryForm" :model="queryParam" :inline="true">
                <el-form-item label="菜单名称" prop="menuName">
                    <el-input v-model="queryParam.menuName" size="small" @keydown.enter.native="getMenuTableData"  placeholder="请输入菜单名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="getMenuTableData" icon="el-icon-search">搜索</el-button>
                    <el-button size="mini" @click="resetQuery" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--按钮区域-->
        <div class="flyDuck-app-home-main-page-button">
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" size="mini" icon="el-icon-plus" @click="openAddDialog" v-has="'/system/sysMenuController/addMenu'">新增</el-button>
                </el-col>
            </el-row>
        </div>
        <!--表格区域-->
        <div class="flyDuck-app-home-main-page-table">
            <el-table :data="menuTableData"  size="mini" height="400px" row-key="id"
                      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column align="center" prop="menuName" label="菜单名称" width="150px"></el-table-column>
                <el-table-column align="center" prop="menuType" label="菜单类型" width="100px" :formatter="menuTypeFormatter"></el-table-column>
                <el-table-column align="center" prop="icon" label="菜单图标">
                    <template slot-scope="scope">
                        <i :class="scope.row.icon" style="color: #1accff;margin-right: 5px"></i>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="path" label="访问路径" width="200px"></el-table-column>
                <el-table-column align="center" prop="component" label="组件路径" width="200px"></el-table-column>
                <el-table-column align="center" prop="url" label="权限路径" width="300px"></el-table-column>
                <el-table-column align="center" prop="sort" label="排序"></el-table-column>
                <el-table-column align="center" prop="status" label="状态" :formatter="statusFormatter"></el-table-column>
                <el-table-column align="center" label="操作" fixed="right" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-edit" @click="openUpdateDialog(scope.row)" v-has="'/system/sysMenuController/updateMenu'">编辑</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteMenu(scope.row)" v-has="'/system/sysMenuController/deleteMenu'">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--弹窗-->
        <div class="flyDuck-app-home-main-page-dialog">
            <el-dialog :title="title" :visible.sync="dialogVisible" width="500px">
                <el-form ref="menuForm" :rules="rules" :model="menuForm"  :validate-on-rule-change="false" label-width="80px">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="菜单类型" prop="id">
                                <el-select v-model="menuForm.menuType" clearable placeholder="请选择菜单类型">
                                    <el-option  v-for="item in menuTypeOptions" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="菜单名称" prop="id">
                                <el-input v-model="menuForm.menuName" placeholder="请输入菜单名称"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="menuForm.menuType != '3'">
                        <el-col :span="24">
                            <el-form-item label="菜单图标" prop="id">
                                <el-input v-model="menuForm.icon" placeholder="请输入菜单图标"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="上级菜单" prop="parentId">
                                <treeselect v-model="menuForm.parentId" clearable :options="menuTreeSelectOptions" :normalizer="normalizer" placeholder="选择上级菜单" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="menuForm.menuType == '2'">
                        <el-col :span="24">
                            <el-form-item label="访问路径" prop="path">
                                <el-input v-model="menuForm.path" placeholder="请输入访问路径"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="menuForm.menuType == '2'">
                        <el-col :span="24">
                            <el-form-item label="组件路径" prop="component">
                                <el-input v-model="menuForm.component" placeholder="请输入组件路径"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="menuForm.menuType == '3'">
                        <el-col :span="24">
                            <el-form-item label="权限路径" prop="id">
                                <el-input v-model="menuForm.url" placeholder="请输入权限路径"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="排序" prop="sort">
                                <el-input-number v-model="menuForm.sort" :min="1"></el-input-number>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="状态" prop="status">
                                <el-switch style="margin-top: 10px" v-model="menuForm.status" active-value="1" inactive-value="2" active-color="#13ce66" ></el-switch>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
    import Treeselect from '@riophae/vue-treeselect'
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'
    import {getMenuTreeList,getMenuDetail,addMenu,updateMenu,deleteMenu,getMenuTreeSelect} from '@/api/system/menu'
    import {getDictOptionList} from '@/api/system/dict'
    export default {
        components:{Treeselect},
        name: "SysMenu",
        data() {
            return {
                /*搜索区域*/
                queryParam:{
                    menuName:'',
                },
                /*按钮区域*/
                /*表格区域*/
                menuTableData:[],
                /*弹窗区域*/
                dialogVisible:false,
                title:'',
                menuForm:{
                    id:null,
                    parentId: null,
                    sort: '',
                    status: '1',
                    menuName: '',
                },
                menuTypeOptions:[],
                statusOptions:[],
                menuTreeSelectOptions:[],
                rules:{
                    menuName:[{required:true, message:'请输入昵称', trigger:'blur'}],
                    sort:[{required:true, message:'请输入排序', trigger:'blur'}],
                },
            };
        },
        mounted() {
            this.getMenuTableData();
            this.getMenuTreeSelect();
            this.getMenuTypeOptions();
            this.getStatusOptions();
        },
        methods: {
            /*搜索区域*/
            /*按钮区域*/
            openAddDialog(){
                this.title = '添加菜单';
                this.resetMenuForm();
                this.dialogVisible = true;
            },
            resetMenuForm(){
                this.menuForm = {
                    id:null,
                    parentId: null,
                    sort: '',
                    status: '1',
                    menuName: '',
                };
            },
            openUpdateDialog(data){
                this.title = '编辑菜单';
                //回显
                getMenuDetail(data.id).then(data => {
                    this.menuForm = data;
                })
                this.dialogVisible = true;
            },
            resetQuery(){
                debugger
                this.queryParam.menuName = '';
                this.page = 1;
                this.getMenuTableData();
            },
            /*表格区域*/
            getStatusOptions(){
                getDictOptionList(`status`).then(data => {
                    this.statusOptions = data;
                })
            },
            statusFormatter(row, column) {
                return this.selectDictLabel(this.statusOptions, row.status);
            },
            getMenuTypeOptions(){
                getDictOptionList(`sys_menu_menuType`).then(data => {
                    this.menuTypeOptions = data;
                })
            },
            menuTypeFormatter(row, column) {
                return this.selectDictLabel(this.menuTypeOptions, row.menuType);
            },
            getMenuTableData(){
                getMenuTreeList(this.queryParam).then(data=>{
                    this.menuTableData = data;
                })
            },
            deleteMenu(data){
                this.$confirm(`是否删除${data.menuName}?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteMenu(data.id).then(data=>{
                        if(data){
                            this.getMenuTableData();
                            this.getMenuTreeSelect();
                        }
                    })
                })
            },
            /*弹窗区域*/
            getMenuTreeSelect(){
                var params = {};
                getMenuTreeSelect().then(data=>{
                    this.menuTreeSelectOptions = data;
                })
            },
            normalizer(node) {
                if (node.children && !node.children.length) {
                    delete node.children;
                }
                return {
                    id: node.id,
                    label: node.menuName,
                    children: node.children
                };
            },
            submitForm(){
                if(this.menuForm.id){
                    //修改
                    this.$refs['menuForm'].validate(valid=>{
                        if(valid){
                            updateMenu(this.menuForm).then(data => {
                                if(data){
                                    this.getMenuTableData();
                                    this.getMenuTreeSelect();
                                    this.dialogVisible = false;
                                }
                            })
                        }
                    })
                }else {
                    //添加
                    this.$refs['menuForm'].validate(valid=>{
                        if(valid){
                            addMenu(this.menuForm).then(data => {
                                if(data){
                                    this.getMenuTableData();
                                    this.getMenuTreeSelect();
                                    this.dialogVisible = false;
                                }
                            })
                        }
                    })
                }


            },
        },
    }
</script>
<style>
</style>

